<template>
	<view class="my-course">
		<view class="top">
			<image  class="bg" src="/static/img/base1.png"></image>
			<view class="data">
				<image :src="photo" alt="" class="head">
				<view class="man-data">
					<span class="name">{{nickName}}</span>
					<span class="name">{{mobile}}</span>
					<span class="name">{{jobName}}</span>
				</view>
			</view>
		</view>
		<view class="menu-box">
			<span class="item" v-for="(item,index) in list" :class="item.addClass" @tap="select(index)">{{item.name}}</span>
		</view>
		<view class="main-content" style="background:rgba(0,0,0,0)" v-show="active==0">
			<!-- <view class="top">
				<span class="text">推荐课程</span>
				<span class="more">查看全部 <i class="iconfont icongengduo1"></i> </span>
			</view> -->
			<view class="course-all">
				<view class="course-item"  v-for="(item,index) in courseList1" @tap="goPage('../course/content')">
					<image :src="item.photo" class="image"></image>
					<span class="name">{{item.courseName}}</span>
					<!-- <p class="content">{{item.introduction}}</p> -->
					<cmd-progress :percent="item.jindu" stroke-color="#1783dd" class="main-jindu" v-show="item.courseType=='1'"></cmd-progress>
					<span class="main-price" v-show="item.courseType=='4'">{{item.address}}</span>
					<span class="iconfont ">{{item.createDate}}</span>
					<!-- <span class="close-Q" @tap.stop="close(item)">取消收藏</span> -->
				</view>
				<nodata v-show="start1 && courseList1.length==0"></nodata>
			</view>
			
		</view>
		<view class="main-content" style="background:rgba(0,0,0,0)" v-show="active==1">
			<!-- <view class="top">
				<span class="text">推荐课程</span>
				<span class="more">查看全部 <i class="iconfont icongengduo1"></i> </span>
			</view> -->
			<view class="course-all">
				<view class="course-item"  v-for="(item,index) in courseList2" @tap="goPage('../course/content')">
					<image :src="item.photo" class="image"></image>
					<span class="name">{{item.title}}</span>
					<!-- <p class="content">{{item.introduction}}</p> -->
					<cmd-progress :percent="item.jindu" stroke-color="#1783dd" class="main-jindu" v-show="item.courseType=='1'"></cmd-progress>
					<span class="main-price" v-show="item.courseType=='4'">{{item.address}}</span>
					<span class="iconfont ">{{item.courseTypeLabel}}</span>
					<!-- <span class="close-Q" @tap.stop="close(item)">取消收藏</span> -->
				</view>
				<nodata v-show="start2 && courseList2.length==0"></nodata>
			</view>
			
		</view>
	</view>
</template>

<script>
	import Cookies from 'js-cookie'
	import nodata from '@/components/nodata.vue'
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	export default {
		components: {cmdProgress,nodata},
		data() {
			return {
				clearStudy:false,
				list:[
					{name:'正在进行',addClass:'active',clearStudy:false},
                	{name:'已完成',addClass:'',clearStudy:true},
				],
				active:0,
				courseList:[
					{url:'/static/img/shu.jpg',number:'6',title:'高级资格证。',time:'2020-07-12'},
					{url:'/static/img/shu.jpg',number:'6',title:'高级资格证。',time:'2020-07-12'},
					{url:'/static/img/shu.jpg',number:'6',title:'高级资格证。',time:'2020-07-12'},
					{url:'/static/img/shu.jpg',number:'6',title:'高级资格证。',time:'2020-07-12'},
				],
				courseList1:[
					
				],
				courseList2:[],
				photo:'',
				nickName:'',
				jobName:'',
				mobile:'',
				start1:false,
				start2:false,
				pageNo1:1,
				pageSize1:20,
				pageSize2:20,
				pageNo2:1,
			}
		},
		onLoad(obj) {
			this.photo = uni.getStorageSync("photo");
			this.nickName = uni.getStorageSync("nickName");
			this.jobName = uni.getStorageSync("jobName");
			this.mobile = uni.getStorageSync("mobile");
			this.getData1();
			this.getData2();
		},
		methods: {
			submit(type){
				uni.showToast({
					title:'您的密码已修改',
					iconfont:'success'
				})
				setTimeout(()=>{
					this.back();
				},500)
			},
			close(item){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '请确认是否取消收藏该课程?',
				    success: function (res) {
				        if (res.confirm) {
				        	that.$http.post("/f/collectionCourse?rootCourseId="+item.rootCourseId)
					         .then(function (response) {
						            uni.showToast({
						            	title:'已取消',
						            	icon:'none'
						            })
					                that.getData1();
					         })
					         .catch(function (error) {
					            // handle error
					            console.log(error);
					         })
				            
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			getData1(){
	          let that = this;
	          this.loading = true;
	          this.$http.post("/f/studyCenter?pageNo="+this.pageNo1+"&pageSize="+this.pageSize1+"&clearStudy=false")
	          .then(function (response) {
	                let list = response.data;
	                if(list.length!=0){
	                    list.forEach((item,i)=>{
	                        item = Object.assign(item,item.courseInfo,item.courseInfo.courseInfo)
	                        if(item.detailsLength!=0){
	                            item.jindu =  Math.ceil((item.userStudyCount/item.detailsLength)*100)
	                        }
	                        else{
	                            item.jindu  = 0;
	                        }
	                        
	                    })
	                }
	                that.courseList1 = list;
	                that.start1 = true;
	          })
	          .catch(function (error) {
	              // handle error
	              console.log(error);
	          })
	        },
	        getData2(){
	          let that = this;
	          this.loading = true;
	          this.$http.post("/f/studyCenter?pageNo="+this.pageNo2+"&pageSize="+this.pageSize2+"&clearStudy=true")
	          .then(function (response) {
	                that.start2 = true;
	                let list = response.data;
	                if(list.length!=0){
	                    list.forEach((item,i)=>{
	                        item = Object.assign(item,item.courseInfo,item.courseInfo.courseInfo)
	                        if(item.detailsLength!=0){
	                            item.jindu =  Math.ceil((item.userStudyCount/item.detailsLength)*100)
	                        }
	                        else{
	                            item.jindu  = 0;
	                        }
	                        
	                    })
	                }
	                that.courseList2 = list;
	          })
	          .catch(function (error) {
	              // handle error
	              console.log(error);
	          })
	        },
			back(){
				uni.navigateBack({
				    delta: 1
				});
			},
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			select(index){
				this.active = index;
				this.list.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active";
					}
					else{
						item.addClass = ""
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.my-course{
		width:100%;
		height:100%;
		background:#f5f5f5;
		.main-content{
			width:100%;
			box-sizing:border-box;
			padding:20rpx 30rpx;
			padding-top:0;
			padding-bottom:30rpx;
			background:#ffffff;
			.course-all{
				width:100%;
				display:flex;
				justify-content:space-between;
				flex-wrap:wrap;
			}
			.course-item{
				width:330rpx;
				margin-top:30rpx;
				border-radius:10rpx;
				overflow:hidden;
				background:#ffffff;
				padding-bottom:20rpx;
				position:relative;
				.main-jindu{
					width:100%;
					box-sizing:border-box;
					padding:0 15rpx;
					margin-top:10rpx;
				}
				.main-price{
					margin-top:10rpx;
					padding:0 15rpx;
					display:block;
					box-sizing:border-box;
					font-size:28rpx;
					color:#666666;
				}
				.close-Q{
					position:absolute;
					height:50rpx;
					width:120rpx;
					right:20rpx;
					bottom:20rpx;
					border-radius:6rpx;
					line-height:50rpx;
					display:block;
					text-align:center;
					font-size:24rpx;
					color:#ffffff;
					background:#1783dd;
					cursor:pointer;
					z-index:9;
				}
				.image{
					width:100%;
					height:200rpx;
				}
				.name{
					display:block;
					font-weight:600;
					line-height:40rpx;
					height:40rpx;
					width:100%;
					box-sizing:border-box;
					padding:0 15rpx;
					overflow: hidden;    
				    text-overflow:ellipsis;    
				    white-space: nowrap;
				    font-size:34rpx;
				    color:#555555;
				}
				.content{
					display:block;
					width:100%;
					line-height:40rpx;
					height:120rpx;
					box-sizing:border-box;
					padding:0 15rpx;  
				    font-size:28rpx;
				    color:#888888;
				    display: -webkit-box;    
				    -webkit-box-orient: vertical;    
				    -webkit-line-clamp: 3;    
				    overflow: hidden;
				    margin-top:5rpx;
				}
				.iconfont{
					width:100%;
					display:block;
					line-height:30rpx;
					box-sizing:border-box;
					padding:0 15rpx;
					height:30rpx;
					overflow: hidden;    
				    text-overflow:ellipsis;    
				    white-space: nowrap;
				    font-size:28rpx;
				    color:#666666;
				    margin-top:10rpx;
				}
				.iconrili1{
					height:70rpx;
					white-space: normal;
					line-height:35rpx;
				}
				.iconrili1:before{
					color:#1783dd;
				}
				.iconfont:before{
					font-size:34rpx;
					margin-right:6rpx;
				}
			}
		}
		.menu-box{
			width:100%;
			box-sizing:border-box;
			padding:0 160rpx;
			background:#ffffff;
			display:flex;
			justify-content: space-between;
			border-bottom:1px solid #e6e6e6;
			position:relative;
			.item{
				line-height:70rpx;
				padding:0 40rpx;
				position:relative;
				color:#555555;
				font-size:30rpx;

			}
			.active{
				color:#1783dd;
			}
			.active:after{
				content:'';
				position:absolute;
				width:60%;
				left:20%;
				bottom:4rpx;
				height:6rpx;
				background:#1783dd;
			}
		}
		.top{
			position:relative;
			width:100%;
			.data{
				width:100%;
				padding:0 60rpx;
				position:absolute;
				left:0;
				top:50%;
				transform:translateY(-50%);
				box-sizing:border-box;
				display:flex;
				.head{
					width:150rpx;
					height:150rpx;
					display:block;
					border-radius:50%;
					margin-right:50rpx;
				}
				.man-data{
					width:calc(100% - 220rpx);
					.name{
						line-height:40rpx;
						font-size:30rpx;
						color:#ffffff;
						display:block;
						width:100%;
						margin-top:10rpx;
					}
				}
			}
		}
		.bg{
			width:100%;
			display:block;
			height:350rpx;
		}
	}
</style>
